import routercofig from "./routerconfig";
import {BrowserRouter,Routes,Route,Navigate} from "react-router-dom"
import {Suspense} from "react" // Suspense是路由切换时候的loading
let Routerview = ()=>{
    let renderRoute =(routercofig)=>{
        return routercofig.map((item,index)=>{
            return item.path ? <Route path={item.path} key={index} element={<item.element></item.element>}>
                    {
                        item.children && renderRoute(item.children)
                    }
            </Route>:<Route path={item.from} key={index} element={<Navigate to={item.to}></Navigate>}></Route>
        })
    }
    return (
        <BrowserRouter>
            <Suspense fallback={<div>...loding</div>}>
                <Routes>
                {/* <Route path='/' element={<Home></Home>}>
                  <Route index element={<Movie></Movie>}></Route>
                  <Route path="/home/movie" element={<Movie></Movie>}></Route>
                  <Route path="/home/cinema" element={<Cinema></Cinema>}></Route>
            </Route>
            <Route path='/detail/:id' element={<Detail></Detail>}></Route>  
            <Route path="/login" element={<Login></Login>}></Route>
            <Route path='/my' element={<My></My>}></Route> */}
                    {
                        renderRoute(routercofig)
                    }
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}
export default Routerview